import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core'
import { computed, observable } from 'mobx-angular'

@Component({
  selector: 'app-sample',
  // changeDetection: ChangeDetectionStrategy.OnPush,
  templateUrl: './sample.component.html',
  styleUrls: [ './sample.component.css' ]
})
export class SampleComponent implements OnInit {
  @observable
  _balance = 0

  @observable
  _obj = {
    a: 1,
    b: 2
  }

  @computed
  get balance() {
    console.log('compute balance')
    return '$' + this._balance
  }

  @computed
  get obj() {
    console.log('compute obj', this._obj)
    return this._obj
  }

  constructor() {
  }

  ngOnInit() {
  }

  doSomething() {
    const money = Math.ceil(Math.random() * 100)
    if (Math.random() >= 0.5) {
      this._balance += money
      console.log('+', money)
    } else {
      this._balance -= money
      console.log('-', money)
    }
  }

  doSomethingMore() {
    this._obj.id += 1
    this._obj.b += 2
  }

  doSomethingMore2() {
    const { a, b } = this._obj
    this._obj = { a: a + 1, b: b + 2 }
  }
}
